// webapck的配置文件

//1.导入的模块
//1.处理路径---path----内置模块
let path = require('path');
//2.引入glob node内置模块,主要用于匹配文件的方法   glob.sync(pattern, options) 
let glob=require('glob');

let HtmlWebpackPlugin = require('html-webpack-plugin')//处理html的
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//提取css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//压缩css



//查看cross-env 变量
// console.log('变量====>',process.env.NODE_ENV);

// console.log(glob);
// console.log('================>',glob.sync('./src/pages/*/*.js'));

/* 
[
  './src/pages/ad/ad.js',
  './src/pages/home/home.js',
  './src/pages/login/login.js',
  './src/pages/register/register.js'
]


*/

//自动处理每一个页面的js模块
let entry={
    resetCss:'./src/assets/css/index.less'
};

//获取所有页面对应的js文件路径 
let htmlPath=glob.sync('./src/pages/*/*.js');
// console.log(htmlPath);   ['./src/pages/*/*.js','./src/pages/*/*.js']
//遍历拼接entry的格式:
htmlPath.forEach(v=>{
    // console.log(v);  ./src/pages/*/*.js
    let chunksName=path.basename(v,'.js');// 第一个参数为路径,第二参数为去掉的内容  如: ad
    // console.log(chunksName);//相当于entry的key   value: v 
    //给entry添加属性 
    entry[chunksName]=v;
})

//自动处理所有HTML页面
let pages=[];

//获取所有html路径
let hPath=glob.sync('./src/pages/*/*.html');


//遍历 hPath,向数组中添加 以下结构的元素
/* 
new HtmlWebpackPlugin({
    template: './src/pages/ad/ad.html',//把index.html复制到dist中自动引入资源文件
    filename:'ad.html',//输出到dist目录中的名字
    chunks:['resetCss','ad'] //主要配置当前页面所需要的js模块 ---就是entry中定义的模块
})
*/
pages=hPath.map(v=>{
    return new HtmlWebpackPlugin({
        template: v,//把index.html复制到dist中自动引入资源文件
        filename:path.basename(v),//输出到dist目录中的名字
        chunks:['resetCss',path.basename(v,'.html')] //主要配置当前页面所需要的js模块 ---就是entry中定义的模块
    })

    // 'ad.html'.replace('.html','')
})
console.log(pages);
//2.暴露5大核心
module.exports = {
    // 5大核心
    //1)entry  入口---重点
    // entry: './src/js/index.js',//单入口

    //多入口 ----主要用于配置 当前页面所需要的模块
    // entry:{
    //     ad:'./src/pages/ad/ad.js',
    //     home:'./src/pages/home/home.js',
    //     login:'./src/pages/login/login.js',
    //     register:'./src/pages/register/register.js',
        
    // },

    entry,

    //2)output 出口---重点
    output: {
        path: path.resolve(__dirname, 'dist'),//输出的目录位置 
        filename: 'js/[name].js', //输出的文件名---自定义的--后期需要设置成动态的
        publicPath: './' //静态资源的目录 
    },
    //3)loader 加载器
    module: {
        rules: [
            //css加载器
            {
                test: /\.css$/,//匹配所有.css文件
                use: [
                    // 'style-loader',//创建style标签把css插入html的head内
                    {
                        loader: MiniCssExtractPlugin.loader,//提取css
                        options: {
                            publicPath: '../'//资源查找路径
                        }
                    },
                    'css-loader'//解析加载css到js中（把css打成字符串）。
                ]
            },
            //less加载器
            {
                test: /\.less$/,//匹配所有.less文件
                use: [//多个加载器
                    // 'style-loader',//创建style标签把css插入html的head内
                    {
                        loader: MiniCssExtractPlugin.loader,//提取css
                        options: {
                            publicPath: '../'//资源查找路径
                        }
                    },
                    'css-loader',//解析加载css到js中（把css打成字符串）。
                    'less-loader',//编译less为css
                ]
            },
            //css中的图像
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',//如果只需要一个的写法
                options: {//额外配置 
                    name: '[hash:10].[ext]',//图片输出的名字hash长度16位默认32位  ext后缀名
                    limit: 10 * 1024,//小于10kbbase64处理
                    //关闭url-loader的esModule使用commonjsmodule解析,url-loader默认使用es6模块化解析而后续使用html-loader引入图片是commonjs解析不关闭会报错
                    esModule: false,
                    outputPath: 'img' //图片输出文件夹
                }
            },
            //html中的图像
            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },
            //字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,//处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
                }
            },
            //编译es6到es5
            {
                test: /\.js$/,
                loader: 'babel-loader', //loader 编译es6为es5
                exclude: /node_modules/ //排除选中的目录
            }
        ]
    },
    //4)plugins 插件
    plugins: [
        //提取css，把css中打包的js中提取出来成为独立文件
        new MiniCssExtractPlugin({//提取css
            filename: 'css/[name].css'// 输出到css文件夹里
        }),
        new OptimizeCssAssetsWebpackPlugin()//压缩css
    ].concat(pages),
    //5)mode  模式---重点
    mode: process.env.NODE_ENV, //开发===>serve   生产===> build
    //开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),//启动服务器目录
        compress: true,//启动gzip
        port: 8848,//端口
        open: true,//自动打开服务
        publicPath: '/',//静态资源查找路径
        openPage: 'ad.html',//打开的页面---自定义
    },
    target: 'web',//目标是浏览器
}